*,
*:before,

*:after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}



html,

body {

  min-height: 100vh;

  display: flex;

  justify-content: center;

  align-items: center;

  background-color: black;

  font-size: 62.5%;

  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

}

@media screen and (max-width: 520px) {

}



.container {

  width: 50rem;

  height: 20rem;

  position: relative;

}



.svg-container {

  z-index: 2;

  position: absolute;

}



.mo-container {

  width: 100%;

  height: 100%;

}



.line {

  fill: none;

  stroke: #ffffff;

  stroke-width: 8;

  stroke-linecap: round;

  stroke-miterlimit: 10;

}



.lttr {

  fill: #5361ff;

}



.sound {

  position: fixed;

  color: #5361ff;

  font-size: 1.8rem;

  bottom: 27vh;

  right: 95px;

  text-decoration: underline;

  cursor: default;
  z-index: 15;

}

.sound--off {

  text-decoration: line-through;

}
h1 {
  font-size: 60px;
  color: #5361ff;
  z-index: 5;
  position: absolute ;
  bottom : 23vh;
  font-family: "Macondo Swash Caps", cursive;

  font-weight: 6000;

  font-style: normal;
}
h2 {

  font-size: 15px;

  color: #5361ff;

  position: absolute ;
  bottom: 21vh;
  left: 60px;

  

}


.me {
  font-size: 25px;

  color: #5361ff;

  z-index: 5;

  position: absolute ;

  bottom : 14.5vh;
  left:60px;

  font-family: "Macondo Swash Caps", cursive;

  font-weight: 6000;

  font-style: normal;
}
.about {

position: absolute;
  bottom: 25px;
  left: 50px;
	height: 50px;
  width: 100%;

}

.bx {

	color: #fff;

	margin: 25px;

	font-size: 35px;

}